<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {encryptionData} from "@/utils/encrypt_aes.js";
import {GetUserName, UpdateUserPassword} from "@/api/index.js";
import {useRouter} from "vue-router";
const router = useRouter();
const user_account = reactive({
  username: null,
  first_name: null,
  old_password: null,
  new_password: null,
});
const ruleFormRef = ref()

// 校验数据
const rules = reactive({

  old_password: [
    {
      required: true,
      message: '请输入旧密码',
      trigger: 'change',
    },
    { min: 6, message: '密码不能小于6位', trigger: 'blur' },
  ],
  new_password: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'change',
    },
    { min: 6, message: '密码不能小于6位', trigger: 'blur' },
  ],

})


// 提交数据给后端 修改用户账号密码
const handleUpdateUserPassword = async()=>{
  const user_account_copy = JSON.parse(JSON.stringify(user_account))
  user_account_copy.old_password = encryptionData(user_account_copy.old_password)
  user_account_copy.new_password = encryptionData(user_account_copy.new_password)
  try {
    const res = await UpdateUserPassword(user_account_copy)
    if(res.status===201){
      ElMessage.success(res.msg)
      //更改密码后清空localStorage存储的用户信息并重新登录
      window.localStorage.clear()
      await router.push('/')
    }else{
      ElMessage.error(res.msg)
    }
    ruleFormRef.value.resetFields()
    user_account.first_name= null
  } catch (error) {
    console.log(error);
  }
}


// 提交校验数据是否合理
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleUpdateUserPassword()
    } else {
      console.log('error submit!', fields)
    }
  })
}


// 获取用户数据
const handleGetUserName = async()=>{
  try {
    const res = await GetUserName()
    if(res.status===200){
      user_account.username = res.data.username
      user_account.first_name = res.data.first_name
    }else{
      ElMessage.warning('获取用户信息失败')
      //更改密码后清空localStorage存储的用户信息并重新登录
      window.localStorage.clear()
      await router.push('/')
    }
  } catch (error) {
    console.log(error);
  }
}

handleGetUserName()

</script>

<template>
  <div class="useraccount">
    <div class="useraccount-box">
      <h2 class="title">账号信息</h2>
      <div class="centent">
        <el-form label-width="100px" :model="user_account" style="max-width: 460px" ref="ruleFormRef"
                 :rules="rules">
          <el-form-item label="账号名">
            <el-input v-model="user_account.username" disabled/>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="user_account.first_name" placeholder="请输入昵称"/>
          </el-form-item>
          <el-form-item label="旧密码" prop='old_password'>
            <el-input v-model="user_account.old_password" type="password" placeholder="请输入旧密码"/>
          </el-form-item>
          <el-form-item label="新密码" prop='new_password'>
            <el-input v-model="user_account.new_password" type="password" placeholder="请输入新密码"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">修改信息</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.useraccount-box {
  width: 500px;
  padding-bottom: 20px;
  background: #fff;
  margin: auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  border-radius: 15px;

  .title {
    text-align: center;
    padding: 20px;
  }

  .centent {
    width: 560px;
    margin: auto;

    .el-form {
      .el-form-item {
        margin-top: 30px;
      }
    }

    .el-button {
      width: 300px;
      margin-left: 10px;
    }
  }
}
</style>